<template>
  <div class="course_detail_wrap">
    <div class="course_detail_head">
      <div class="course_detail_header_left">
        <img src="https://www.xiaoqiqiao.com/new_yun/images/commonImage/arrow_select.svg" alt="" @click="push" />
        <div>
          <p>
            <span class="FeedBack_ResourceName">{{ course.courseName }}</span>
          </p>
          <div class="course_detail_header_choose">
            <span v-for="(item, index) in headerItems" :key="index" class="course_detail_header_item" :class="{
              course_detail_header_active: selectedType === item.type,
            }" @click="selectItemType(item.type)">
              {{ item.label }}({{ item.count }})
              <div class="underline"></div>
            </span>
          </div>
        </div>
      </div>
      <div class="course_detail_header_right">
        <el-button @click="
          selectCourse();
        visible = true;
        ">
          课程概述
        </el-button>
        <el-drawer v-model="visible" :show-close="false">
          <template #header="{ close, titleId, titleClass }">
            <h4 :id="titleId" :class="titleClass">课程概述</h4>
            <el-button type="danger" @click="close">
              <el-icon class="el-icon--left">
                <CircleCloseFilled />
              </el-icon>
              Close
            </el-button>
          </template>
          <div class="tc">
            <img src="https://www.xiaoqiqiao.com/new_yun/images/course/kechengjianjie.svg" alt="" /><span>课程简介</span>
          </div>
          <div class="detail">
            <span>创建者: {{ course.courseName }}</span>
            <span>所属方向:{{ directionName }} </span>
          </div>
          <div class="content">
            {{ course.courseInfo }}
          </div>
        </el-drawer>
        <span class="ant-input-affix-wrapper">
          <el-input v-model="search" style="width: 240px" placeholder="搜索想要查找的内容" :prefix-icon="Search"
            @input="debouncedSearch" />
          <!-- 搜索结果容器 -->
          <div v-if="resultsVisible" class="search-results-container" @mouseleave="handleMouseLeave()"
            @mouseenter="handleMouseEnter()">
            <!-- 视频搜索结果 -->
            <div v-if="videoList.length">
              <h3>视频结果</h3>
              <ul>
                <li v-for="video in videoList" :key="video.id" @click="handleClick('video', video.id)">
                  {{ video.videoName }}
                </li>
              </ul>
            </div>
            <!-- 文件搜索结果 -->
            <div v-if="fileInfoList.length">
              <h3>文件结果</h3>
              <ul>
                <li v-for="file in fileInfoList" :key="file.id" @click="handleClick('material', file.id)">
                  {{ file.infoName }}
                </li>
              </ul>
            </div>
            <div v-else-if="taskList.length">
              <h3>作业结果</h3>
              <ul>
                <li v-for="work in taskList" :key="work.id" @click="handleClick('homework', work.id)">
                  {{ work.taskName }}
                </li>
              </ul>
            </div>
            <div v-else-if="coursewareList.length">
              <h3>课件结果</h3>
              <ul>
                <li v-for="courseware in coursewareList" :key="courseware.id"
                  @click="handleClick('document', courseware.id)">
                  {{ courseware.coursewareName }}
                </li>
              </ul>
            </div>
            <!-- 如果没有搜索结果 -->
            <div v-else-if="search">
              <p>没有找到相关内容。</p>
            </div>
          </div>
        </span>
      </div>
    </div>
  </div>

  <div class="fjw">
    <div class="box">
      <div class="ress">
        <div class="ress-left">
          <img src="@/assets/img/章节大纲.png" />
          <div class="ress-left-text">章节大纲</div>
        </div>
      </div>
      <div class="left">
        <el-tree class="text-ellipsis" :data="data" :props="defaultProps" style="font-size: 20px"
          @node-click="handleNodeClick" />
      </div>
    </div>
    <div class="box1" v-if="selectedType === 'video'">
      <div class="ress1">
        <div v-for="(item, index) in sectionList1" :key="index">
          <div v-if="item.videoList.length > 0">
            <div class="right1" :id="item.sectionId">
              <div class="resp1">
                <div class="ress-left-text_1">
                  {{ item.sectionName }}
                </div>
              </div>
            </div>
            <div class="right" v-for="(item1, index1) in item.videoList" :key="index1">
              <div class="resp" @click="JoinVideo(courseId, item1.videoId)">
                <img src="https://www.xiaoqiqiao.com/new_yun/images/course/shipin.svg" />
                <div class="ress-left-text1">{{ item1.videoName }}</div>
                <div class="ress-left-text2">
                  <div class="demo-progress">
                    <el-progress :percentage="item1.videoJdBfb" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


    <div class="box1" v-else-if="selectedType === 'document'">
      <div class="ress1">
        <div v-for="(item, index) in sectionList2" :key="index">
          <div v-if="item.coursewareList.length > 0">
            <div class="right1" :id="item.sectionId">
              <div class="resp1">
                <div class="ress-left-text_1">{{ item.sectionName }}</div>
              </div>
            </div>
            <div class="right" v-for="(item1, index1) in item.coursewareList" :key="index1">
              <div class="resp">
                <img src="https://www.xiaoqiqiao.com/new_yun/images/course/kejian.svg" />
                <div class="ress-left-text1">{{ item1.coursewareName }}</div>
                <div class="ress-left-text2">

                  <img src="https://www.xiaoqiqiao.com/new_yun/images/course/xiazai.svg " height="16px" width="16px"
                    @click="downloadFile(item1.coursewarePath)" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="box1" v-else-if="selectedType === 'homework'">
      <div class="ress1">
        <div v-for="(item, index) in sectionList3" :key="index">
          <div v-if="item.taskList.length > 0">
            <div class="right1" :id="item.sectionId">
              <div class="resp1">
                <div class="ress-left-text_1">{{ item.sectionName }}</div>
              </div>
            </div>
            <div class="right" v-for="(item1, index1) in item.taskList" :key="index1">
              <div class="resp" @click="toWriteTask(item1.taskId)">
                <img src="https://www.xiaoqiqiao.com/new_yun/images/course/zuoye.svg" />
                <div class="ress-left-text1">{{ item1.taskName }}</div>
                <div class="ress-left-text2">
                  <span>去答题</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="box1" v-else-if="selectedType === 'material'">
      <div class="ress1">
        <div v-for="(item, index) in sectionList4" :key="index">
          <div v-if="item.fileInfoList.length > 0">
            <div class="right1" :id="item.sectionId">
              <div class="resp1">
                <div class="ress-left-text_1">{{ item.sectionName }}</div>
              </div>
            </div>
            <div class="right" v-for="(item1, index1) in item.fileInfoList" :key="index1">
              <div class="resp">
                <img src="@/assets/img/资料.svg" />
                <div class="ress-left-text1">{{ item1.infoName }}</div>
                <div class="ress-left-text2">

                  <img src="https://www.xiaoqiqiao.com/new_yun/images/course/xiazai.svg " height="16px" width="16px"
                    @click="downloadFile(item1.infoPath)" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, reactive, onUnmounted, watch } from "vue";
import { ElButton, ElDrawer, ElMessage } from "element-plus";
import { CircleCloseFilled, Search } from "@element-plus/icons-vue";
import router from "@/router";
import { selectCourseDetail } from "@/api/course.js";

import {
  selectSectionList,
  selectSectionListByName,
  selectVideoList,
  selectCoursewareList,
  selectWorkList,
  selectFileList,
} from "@/api/section.js";
import {
  getVideoListService,
  selectVideoListByNameService,
  selectVideoCountService,
  getVideoJdService,
  selectUserInfo
} from "@/api/video.js";
import { debounce } from "lodash-es";
import { selectChapterList, selectChapterListById } from "@/api/chapter.js";
import { getDirectionNameByCourseIdService } from "@/api/direction.js";
import {
  selectCoursewareListByName,
  selectCoursewareCount,
} from "@/api/courseware.js";
import { selectFileListByName, selectFileCount } from "@/api/fileInfo.js";
import { selectTaskName, selectTaskCount } from "@/api/work.js";
//定义课程对象
const course = ref({});
//获取上个页面传过来的课程编号
const courseId = ref();

courseId.value = router.currentRoute.value.query.courseId
// console.log(courseId.value);

//获取课程信息
const JoinVideo = (courseId, videoId) => {
  router.push({
    path: "/course/CourseArticle",
    query: {
      courseId: courseId,
      videoId: videoId,
    },
  });
};
const selectCourse = async () => {
  let res = await selectCourseDetail(courseId.value);
  course.value = res.data;
};
selectCourse();

const direction = ref([]);

//课程编号查询视频数量
const videoCount = ref(0);
const getVideoCount = async () => {
  let res = await selectVideoCountService(courseId.value);
  videoCount.value = res.data;
};

//课程编号查询课件数量
const coursewareCount = ref(0);
const getCoursewareCount = async () => {
  let res = await selectCoursewareCount(courseId.value);
  coursewareCount.value = res.data;
};
getCoursewareCount();
//课程编号查询资料数量
const fileCount = ref(0);
const getFileCount = async () => {

  let res = await selectFileCount(courseId.value);
  fileCount.value = res.data;
};
getFileCount();
//课程编号查询作业数量
const taskCount = ref(0);
//获取用户信息
const userIds = ref(null)
const userInfo = async () => {
  let res = await selectUserInfo()
  userIds.value = res.data.userId

};

userInfo()

const getTaskCount = async () => {
  let res = await selectTaskCount(courseId.value);
  taskCount.value = res.data;

};
getTaskCount();

const sectionList1 = ref([]); const getSectionList = async () => {
  let res = await selectVideoList(courseId.value);
  sectionList1.value = res.data;
  sectionList1.value.forEach((item) => {
    item.videoList.forEach((item1) => {
      getVideoJdService(userIds.value, item1.videoId).then((res) => {
        // console.log("查看数据进度条百分比："+userIds.value+"--"+item1.videoId+"======"+res.data);
        item1.videoJdBfb = res.data;
      });
    });
  });
};



const sectionList2 = ref([]);
const getSectionCoursewareList = async () => {
  // console.log(courseId.value);
  let res = await selectCoursewareList(courseId.value);
  sectionList2.value = res.data;
  //查到每个课件的路径
  sectionList2.value.forEach((item) => {
    item.coursewarePath = +item.coursewarePath;
  });
};
const downloadFile = (path) => {
  const link = document.createElement("a");
  link.href = path; // 假设 `path` 是文件的 URL
  link.download = ""; // 可以设置下载文件的名字
  link.click();
};
const sectionList3 = ref([]);
const getSectionTaskList = async () => {
  let res = await selectWorkList(courseId.value);
  sectionList3.value = res.data;
};

const sectionList4 = ref([]);
const getSectionFileInfoList = async () => {
  let res = await selectFileList(courseId.value);
  sectionList4.value = res.data;
  //查到每个资料的路径
  sectionList4.value.forEach((item) => {
    item.filePath = +item.filePath;
  });
};


//课程编号查询章节列表
const data = ref([]);
const getChapterListById = async () => {
  let res = await selectChapterListById(courseId.value);
  data.value = res.data;
  data.value.forEach((item) => {
    item.label = item.chapterName;
    item.children = [];
    item.sectionList.forEach((it) => {
      item.children.push({
        label: it.sectionName,
        value: it.sectionId,
      });
    });
  });
};
getChapterListById();
//课程编号查询视频列表
const videoList = ref([]);
const getVideoList = async () => {
  let res = await getVideoListService(courseId.value);
  videoList.value = res.data;
};
getVideoList();
//获取视频进度
const handleNodeClick = (data) => {
  const targetId = data.value;
  const targetElement = document.getElementById(targetId);
  if (targetElement) {
    targetElement.scrollIntoView({ behavior: "smooth" });
  }
};
//课程编号查询课件列表
const coursewareList = ref([]);
const getCoursewareList = async () => {
  let res = await selectCoursewareList(courseId.value);
  coursewareList.value = res.data;
};
//获取课件列表

//课程编号查询获取资料列表
const fileInfoList = ref([]);
const getFileList = async () => {
  let res = await selectFileList(courseId.value);
  fileInfoList.value = res.data;
};
//获取资料列表

//课程编号查询获取作业列表
const taskList = ref([]);
const getTaskList = async () => {
  let res = await selectWorkList(courseId.value);
  taskList.value = res.data;
};
//获取作业列表

//课程编号查询获取方向
const directionName = ref("");
const getDirectionNameByCourseId = async () => {
  let res = await getDirectionNameByCourseIdService(courseId.value);
  direction.value = res.data;
  direction.value.forEach((item, index) => {
    directionName.value += item.directionName;
    if (index < direction.value.length - 1) {
      // 只有在不是最后一个元素时才添加斜杠
      directionName.value += "/";
    }
  });
};
//获取方向




const search = ref("");
const resultsVisible = ref(false);

const searchCourse = async () => {
  //当前搜索内容为空时，将结果列表隐藏
  if (!search.value) {
    resultsVisible.value = false;
    return;
  }
  try {
    // 调用 selectVideoListByNameService 方法
    const res = await selectVideoListByNameService(
      search.value,
      courseId.value
    );
    videoList.value = res.data;
    // 调用 selectCoursewareListByName 方法
    const res1 = await selectCoursewareListByName(search.value, courseId.value);
    coursewareList.value = res1.data;
    //调用selectFileListByName方法
    const res2 = await selectFileListByName(search.value, courseId.value);
    fileInfoList.value = res2.data;
    // 调用 selectTaskName 方法
    const res3 = await selectTaskName(search.value, courseId.value);
    taskList.value = res3.data;
    resultsVisible.value = true;
  } catch (error) { }
};

// 使用 lodash 的 debounce 函数来防抖
const debouncedSearch = debounce(searchCourse, 300);

// 监听 search 的变化，调用 debouncedSearch 方法
watch(search, () => {
  debouncedSearch();
});

let hideTimer = null; // 用于存储定时器的引用

const handleMouseLeave = () => {
  if (hideTimer) {
    clearTimeout(hideTimer); // 如果已有定时器，先清除
  }
  hideTimer = setTimeout(() => {
    resultsVisible.value = false; // 5秒后隐藏结果容器
  }, 5000);
};

const handleMouseEnter = () => {
  if (hideTimer) {
    clearTimeout(hideTimer); // 鼠标重新进入时清除定时器
  }
};
// 清理函数，避免内存泄漏
onMounted(() => {
  return () => {
    debouncedSearch.cancel();
  };
});
// const handleDocumentClick = (event) => {
//   if (
//     resultsRef.value &&
//     !resultsRef.value.contains(event.target) &&
//     document.activeElement !== inputRef.value.$el
//   ) {
//     showResults.value = false;
//   }
// };
// 监听点击事件
onMounted(() => {
  //document.addEventListener("click", handleDocumentClick);
  getSectionCoursewareList();
  getSectionList();
  getSectionTaskList();
  getSectionFileInfoList();
  getVideoCount();
  getFileList();
  getTaskList();
  getCoursewareList();
  getDirectionNameByCourseId();
});
// 卸载事件监听
// onUnmounted(() => {
//   document.removeEventListener("click", handleDocumentClick);
// });

const visible = ref(false);
const open = ref(false);

const format = (percentage) => (percentage === 100 ? "Full" : `${percentage}%`);

const input2 = ref("");
const defaultProps = {
  children: "children",
  label: "label",
};

const push = () => {
  router.push("/course/CourseList");
};

// 定义数据
const selectedType = ref("video");
const headerItems = [
  { type: "video", label: "视频", count: videoCount },
  { type: "document", label: "课件", count: coursewareCount },
  { type: "homework", label: "作业", count: taskCount },
  { type: "material", label: "资料", count: fileCount },
];

//传参数到答题页面
const toWriteTask = (taskId) => {
  router.push({
    path: "/work/SelectWork",
    query: { taskId: taskId }, // 序列化对象，如果需要的话
  });
};

// 方法：点击切换类型
const selectItemType = (type) => {
  selectedType.value = type;
};

const selectedId = ref(null);
const contentArea = ref(null);
const handleClick = (type, id) => {
  selectedType.value = type;
  selectedId.value = id;

  // 查找目标元素
  const targetElement = document.getElementById(id);
  if (targetElement) {
    // 滚动到目标元素
    targetElement.scrollIntoView({ behavior: 'smooth' });
  }
};

</script>
<style lang="scss">
* {
  margin: 0;
  padding: 0;
}

body {
  background-color: transparent;
}

.course_detail_wrap {
  .course_detail_head {
    width: 1621px;
    height: 72px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    background-color: #fff;
    justify-content: space-between;
    position: relative;
    white-space: nowrap;

    .course_detail_header_left {
      align-items: flex-start;
      display: flex;
      flex: 1;
      overflow: hidden;
      margin-top: -36px;
      text-overflow: ellipsis;
      width: 1208px;
      height: 24px;
      margin-left: 20px;

      img {
        width: 14px;
        margin-top: 8px;
        transform: rotate(-90deg);
      }

      img:hover {
        cursor: pointer;
      }

      .FeedBack_ResourceName {
        font-size: 16px;
        margin: 0;
        outline: 0;
        padding: 0;
        margin-left: 9px;
        vertical-align: baseline;
      }

      .course_detail_header_choose {
        width: 566px;
        height: 16px;
        bottom: 14px;
        margin-left: -2px;
        position: absolute;

        /* 你现有的CSS */
        .underline {
          width: 28px;
          background-color: #f4523b;
          position: absolute;
          left: 50%;
          bottom: -14px;
          visibility: hidden;
          transform: translateX(-50%);
          border: 0;
        }

        .course_detail_header_active .underline {
          visibility: visible;
        }

        span {
          color: rgba(0, 0, 0, 0.65);
          cursor: pointer;
          font-size: 14px;
          font-weight: 400;
          margin-right: 24px;
          position: relative;
        }

        .course_detail_header_active {
          color: #f4523b;
          font-weight: 600;
        }

        .course_detail_header_active:hover {
          color: #f4523b;
          font-weight: 600;
        }

        .course_detail_header_active::before {
          width: 28px;
          border: 1px solid #f4523b;
          content: "";
          position: absolute;
          background-color: #f4523b;
          height: 1px;
          left: 50%;
          bottom: -14px;
          width: 28px;
          transform: translate(-50%, -50%);
        }
      }

      .course_detail_header_choose span:hover {
        cursor: pointer;
        color: #000;
      }
    }

    .course_detail_header_right {
      width: 434px;
      height: 40px;

      .el-drawer {
        .el-button {
          border: 0;
        }
      }

      button {
        width: 87px;
        height: 32px;
        background-color: #fff;
        border: 1px solid transparent;
        border-radius: 4px;
        border-color: rgba(0, 0, 0, 0.15);
        box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02);

        span {
          font-size: 100%;
          display: inline-block;
          background: transparent;
          color: rgba(0, 0, 0, 0.45);
          width: 56px;
          line-height: 22px;
          height: 22px;
        }
      }

      .tc {
        width: 450px;
        height: 50px;
        background: #fafafa;
        display: flex;
        align-items: center;
        justify-content: flex-start;

        span {
          margin-left: 10px;
        }
      }

      .detail {
        widows: 460px;
        height: 42px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 12px;
        font-weight: 400;
        padding: 20px 5px 0;
        margin-bottom: 16px;

        span {
          margin-left: 10px;
        }
      }

      .content {
        width: 460px;
        height: 100%;
        -webkit-box-orient: vertical;
        color: rgba(0, 0, 0, 0.65);
        display: -webkit-box;
        line-height: 40px;
        white-space: normal;
        margin-left: 10px;
      }

      button:hover {
        cursor: pointer;
        border-color: rgb(255, 139, 116);

        span {
          color: rgb(255, 139, 116);
        }
      }

      .ant-input-affix-wrapper {
        width: 240px;
        height: 32px;
        margin-left: 30px;

        input {
          width: 220px;
          height: 32px;
          border-color: rgba(0, 0, 0, 0.15);
        }

        input:focus {
          outline: none;
        }

        input:hover {
          border-color: rgb(244, 82, 59);
        }

        .ant-input-suffix {
          width: 24px;
          height: 24px;
          color: rgba(0, 0, 0, 0.65);
          position: absolute;
          transform: translate(-50%);
          display: flex;
          line-height: 0;
          align-items: center;
          top: 50%;
          z-index: 2;
          margin-top: -15px;
        }

        .ant-input-suffix:hover {
          cursor: pointer;
          color: rgb(244, 82, 59);
        }
      }

      /* 搜索结果容器样式 */
      .search-results-container {
        position: absolute;
        /* 设置为绝对定位，以便相对于父元素定位 */
        overflow: auto;
        height: 150px;
        width: 380px;
        /* 宽度与输入框相同 */
        background-color: #ffffff;
        /* 背景颜色 */
        border: 1px solid #ccc;
        /* 边框 */
        border-radius: 5px;
        /* 圆角 */
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        /* 阴影效果 */
        z-index: 1000;
        /* 提升层级，确保在其他元素之上显示 */

        overflow-y: auto;
        /* 如果内容超出最大高度，启用滚动条 */
        padding: 10px;
        /* 内边距 */
      }

      /* 结果标题样式 */
      .search-results-container h3 {
        margin-top: 0;
        /* 移除顶部外边距 */
        color: #333;
        /* 文字颜色 */
      }

      /* 列表项样式 */
      .search-results-container ul {
        list-style-type: none;
        /* 移除列表默认样式 */
        padding-left: 0;
        /* 移除左边内边距 */
      }

      .search-results-container li {
        padding: 5px 0;
        /* 上下内边距 */
        cursor: pointer;
        /* 鼠标悬停时变为手型 */
      }

      .search-results-container li:hover {
        background-color: #f5f5f5;
        /* 鼠标悬停时的背景色 */
      }

      /* 无结果信息样式 */
      .search-results-container p {
        color: #999;
        /* 文字颜色 */
        text-align: center;
        /* 居中文本 */
      }
    }
  }
}

.demo-progress .el-progress--line {
  max-width: 150px;
}

.el-tree .el-tree-node__content {
  padding-top: 20px;
  /* 增加顶部内边距 */
  padding-bottom: 20px;
  /* 增加底部内边距 */
}

.box {
  width: 500px;
  height: 640px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 0.8rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  background-color: #fff;
  margin-left: 20px;
}

.left {
  width: 480px;
  height: 590px;
  overflow-y: auto;
  background-color: #fff;
}

.ress {
  width: 500px;
  height: 40px;
  background-color: rgb(245, 245, 245);
  border-radius: 0.8rem 0.8rem 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ress-left {
  width: 460px;
  height: 30px;
  display: flex;
  justify-content: space-around;
  align-items: center;

  img {
    width: 20px;
    height: 20px;
  }
}

.ress-left-text {
  width: 420px;
  font-size: 20px;
  font-weight: bold;
}

.ress-left-text2 {
  height: 50px;
  width: 140px;
  font-size: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ress-left-text1 {
  width: 740px;
  font-size: 16px;
}

.ress-left-text_1 {
  width: 100%;
  font-size: 16px;
  color: #000000a6;
}

.resp1 {
  width: 970px;
  height: 40px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.right1 {
  width: 1010px;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid rgb(217, 217, 217);
  background-color: rgb(254, 237, 236);
}

.el-tree-node__children {
  font-weight: normal;
  font-size: 16px;
  margin-left: 10px;
  border-left: 2px solid #ccc;
}

.box1 {
  width: 1010px;
  height: 640px;
  border-radius: 0.8rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  background-color: #fff;
  overflow: hidden;
  margin-right: 40px;
}

.right {
  width: 1010px;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #000000a6;
  border-bottom: 1px solid rgb(217, 217, 217);

  img {
    width: 30px;
  }

  img:hover {
    cursor: pointer;
    color: red;
  }
}

.right:hover {
  color: red;
  cursor: pointer;
  background: #fff4f0;
}

.ress1 {
  width: 1010px;
  height: 630px;
  overflow-y: auto;
  overflow-x: hidden;
}

.fjw {
  width: 1620px;
  height: 600px;
  display: flex;
  justify-content: space-between;
  margin-top: 50px;
}

.resp {
  width: 970px;
  height: 40px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.el-drawer__header {
  box-shadow: none;
}
</style> */